<template>
  <div>
    <el-form :inline="true" :model="form" label-width="80px">
      <el-form-item>
        <el-select v-model="form.region" placeholder="搜索类型">
          <el-option label="申请人" value="name"></el-option>
          <el-option label="申请账号" value="account"></el-option>
          <el-option label="联系方式" value="phone"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.searchMessage" placeholder="请输入搜索内容"  ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin-left: 15px;" icon="el-icon-refresh-right"  @click="searchHandle()">重 置</el-button>
      </el-form-item>
    </el-form>
    <div>
    <el-table
    :data="tableData.filter(data => !form.searchMessage || data[form.region].toLowerCase().includes(form.searchMessage.toLowerCase()))"
    border
    style="width: 100%">
    <el-table-column
      type="index"
      label="序号"
      width="100"
      >
    </el-table-column>
    <el-table-column
      label="申请人"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="申请账号"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.account }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="账号类型"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{applyType(scope.row.position)}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="联系方式"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.phone }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '未通过', value: 0 },{ text: '审核中', value: 1 }, { text: '已通过', value: 2 }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="tags[scope.row.status]"
          disable-transitions>{{handleTags(scope.row)}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column 
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          v-show="scope.row.status===1"
          @click="handleClick(scope.$index, scope.row)">点击处理</el-button>
        <el-button
          size="mini"
          type="warning"
          v-show="scope.row.status !==1"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          v-show="scope.row.status !==1"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <!-- 修改弹出窗 -->
    <div>
      <el-dialog 
      title="编辑信息" 
      status-icon
      :visible.sync="editFormVisible"
    >
    <el-form 
      :model="editform" 
      label-width="80px"
    >
      <el-form-item label="申请人">
        <el-input disabled v-model="editform.name" ></el-input>
      </el-form-item>
      <el-form-item label="申请账号">
        <el-input disabled v-model="editform.account" ></el-input>
      </el-form-item>
      <el-form-item label="账号类型">
        <el-input disabled v-model="positionname"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input disabled v-model="editform.phone" ></el-input>
      </el-form-item>
      <el-form-item label="申请状态">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
      </el-select>
      </el-form-item>
    </el-form>  
    <div slot="footer" class="dialog-footer">
      <el-button @click="reseveEditForm">取 消</el-button>
      <el-button type="primary" @click="validateEditForm">确 定</el-button>
    </div>
    </el-dialog>
    </div>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tags: ["danger", "", "success"],
      form: {
        searchMessage: "",
        region:'name'
      },
      searchMessage: "",
      editFormVisible: false,
      editform: {
        account: "",
        password: "",
        name: "",
        age: "",
        gender: "",
        phone: "",
        position: 2,
        status: 0,
        isBan: false
      },
      positionname: "",
      options: [
        {
          value: 0,
          label: "未通过"
        },
        {
          value: 1,
          label: "申请中"
        },
        {
          value: 2,
          label: "已通过"
        }
      ],
      value: "",
      tableData: [],
      currentPage: 0,
      pagesize: 0,
      total: 0
    };
  },
  mounted() {
    // this.$store.dispatch("user/getAll", this.tableData);
    this.getBackData();
  },
  computed: {
    handleTags() {
      return function(data) {
        if (data.status === 0) {
          return "未通过";
        } else if (data.status === 1) {
          return "申请中";
        } else if (data.status === 2) {
          return "已通过";
        } else {
          return "";
        }
      };
    },
    applyType() {
      //职位（0：超级管理员；1：平台管理员；2：门店管理员）
      return function(position) {
        if (position === 0) {
          return "超级管理员";
        } else if (position === 1) {
          return "平台管理员";
        } else if (position === 2) {
          return "门店管理员";
        } else {
          return "";
        }
      };
    }
  },
  methods: {
    //获取后台数据
    getBackData(current = 1, size = 3) {
      let time = Date.now();
      axios
        .get(
          `/admin/admins/find?position=2&&current=${current}&&size=${size}&&t=${time}`
        )
        .then(res => {
          console.log("获取数据", res);
          this.tableData = res.data.rows;
          this.currentPage = parseInt(res.data.current);
          this.pagesize = parseInt(res.data.size);
          this.total = parseInt(res.data.total);
        });
    },
    //修改
    handleEdit(index, row) {
      console.log(index, row);
      this.editform = row;
      this.value = row.status;
      this.positionname = this.applyType(row.position);
      console.log(this.editform);
      this.editFormVisible = true;
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // this.tableData.splice(index, 1);
          axios.delete(`/admin/admins/${row._id}`).then(res => {
            console.log(res);
            this.getBackData(this.currentPage, this.pagesize);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //点击处理
    handleClick(index, row) {
      // console.log(index, row);
      this.editform = row;
      this.value = row.status;
      this.positionname = this.applyType(row.position);
      // console.log(this.editform);
      this.editFormVisible = true;
    },
    //搜索
    searchHandle() {
      console.log(this.form.searchMessage);
      this.form.searchMessage = '';
      // let type = "name";
      // let value = this.form.searchMessage;
      // axios
      //   .get(`/admin/admins/find?position=2&&type=${type}&&value=${value}`)
      //   .then(res => {
      //     this.tableData = res.data.rows;
      //     this.currentPage = parseInt(res.data.current);
      //     this.pagesize = parseInt(res.data.size);
      //     this.total = parseInt(res.data.total);
      //   });
    },
    //标签
    filterTag(value, row) {
      // 注册的账号状态（0：未通过；1：申请中；2：已通过）
      return row.status === value;
    },
    //修改弹出窗确认
    validateEditForm() {
      let data = {
        account: this.editform.account,
        password: this.editform.password,
        name: this.editform.name,
        age: this.editform.age,
        gender: this.editform.gender,
        phone: this.editform.phone,
        status: this.value,
        position: 2,
        isBan: false
      };
      console.log(data);
      axios.put(`/admin/admins/update/${this.editform._id}`, data).then(res => {
        // console.log("修改", res);
        // console.log("this", this);
        this.getBackData(this.currentPage, this.pagesize);
        this.editFormVisible = false;
      });
    },
    reseveEditForm() {
      this.editFormVisible = false;
    },
    //改变每页大小
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      let current = 1;
      let size = val;
      this.getBackData(current, size);
    },
    //改变当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let size = this.pagesize;
      this.getBackData(val, size);
    }
  }
};
</script>

<style>
</style>